<template>
  <div style="padding: 20px 20px 0px 20px">
    <!--    头-->
    <el-form :inline="true" :model="storeOrderInput" class="demo-form-inline">
      <span style="font-size: 35px">订单列表</span>
      <el-form-item style="float: right;margin-top: 8px">
        <el-button type="primary" @click="getStoreOrder">查询</el-button>
      </el-form-item>
      <el-select v-model="storeOrderInput.type" placeholder="大平台/社区" clearable
                 style="float: right;margin-top: 8px; margin-right: 10px">
        <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="storeOrderInput.isRefund" placeholder="退货状态" clearable
                 style="float: right;margin-top: 8px; margin-right: 10px">
        <el-option
            v-for="item in isRefunds"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="storeOrderInput.status" placeholder="订单状态" clearable
                 style="float: right;margin-top: 8px; margin-right: 10px">
        <el-option
            v-for="item in statuss"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="storeOrderInput.order" placeholder="订单编号"></el-input>
      </el-form-item>


    </el-form>
<!--    表格-->
    <el-table
        :data="storeOrderData"
        style="width: 100%;"
        :show-overflow-tooltip="false"
        height="800"
        :border="true"

    >
      <el-table-column
          prop="order_sn" label="订单编号" :show-overflow-tooltip="true" fixed width="150">
      </el-table-column>
      <el-table-column
          prop="pnmae" label="产品名称" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="transport_fee" label="运费" :show-overflow-tooltip="true"  width="50">
      </el-table-column>
      <el-table-column
          prop="price" label="价格" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
        prop="uname" label="买家" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
        prop="remark" label="买家备注" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="type" label="大平台/社区" :show-overflow-tooltip="true"  width="100" :formatter="istype">
      </el-table-column>
      <el-table-column
          prop="name" label="团长" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="courier_number" label="快递单号" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="receive_name" label="收货人" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="receive_mobile" label="联系方式" :show-overflow-tooltip="true" width="100">
      </el-table-column>
      <el-table-column
          prop="address" label="收货地址" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="is_refund" label="退款状态" :show-overflow-tooltip="true"  width="100" :formatter="refund">
      </el-table-column>
      <el-table-column
          prop="refund_reason_detail" label="退款原因" :show-overflow-tooltip="true"  width="100">
      </el-table-column>
      <el-table-column
          prop="refuse_reason_detail" label="退款失败原因" :show-overflow-tooltip="true"  width="130">
      </el-table-column>
      <el-table-column
          prop="pay_time" label="支付时间" :show-overflow-tooltip="true"  width="100" :formatter="sj">
      </el-table-column>
      <el-table-column
          prop="ship_time" label="发货时间" :show-overflow-tooltip="true" width="100" :formatter="sj">
      </el-table-column>
      <el-table-column
          prop="receive_time" label="收货时间" :show-overflow-tooltip="true"  width="100" :formatter="sj">
      </el-table-column>
      <el-table-column
          prop="refund_time" label="退款时间" :show-overflow-tooltip="true"  width="100" :formatter="sj">
      </el-table-column>
      <el-table-column
          prop="status" label="订单状态" :show-overflow-tooltip="true"  width="100" :formatter="isStatus">
      </el-table-column>
      <el-table-column label="操作" min-width="80" fixed="right">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="send(scope.row)" v-show="ifsend(scope.row)">发货</el-button>

        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="page"
        :page-size="storeOrderPage.size"
        :total="storeOrderPage.total"
        style="margin-top: 10px;">
    </el-pagination>
  </div>
</template>

<script>
import as from "@/axios/axios";

export default {
name: "StoreOrder",
  created() {
    this.getStoreOrder()
  },
  data(){
  return {
    storeOrderInput:{},

    types:[{value: 0, label: '大平台'},{value: 1, label: '社区'}],
    isRefunds:[{value: 0, label: '正常'},{value: 1, label: '退款中'},{value: 2, label: '退款失败'}],
    statuss: [
      {value: 0, label: '未支付'},
      {value: 1, label: '代发货'},
      {value: 2, label: '待收货'},
      {value: 3, label: '已完成'},
      {value: 4, label: '已退款'},
      {value: 5, label: '已取消'},
    ],
    storeOrderData:[],
    storeOrderPage:{total:1,pages:1,size:15},
  }
  },
  methods:{
    //获取店铺订单
    getStoreOrder(){

    as.post("/storeOrder/getStoreOrder",{
      sid:localStorage.getItem("storeId"),

      type:this.storeOrderInput.type,
      isRefund:this.storeOrderInput.isRefund,
      status:this.storeOrderInput.status,
      order:this.storeOrderInput.order,
      current:this.storeOrderPage.pages,
      size:this.storeOrderPage.size,
    }).then((res)=>{
      console.log(res)
      this.storeOrderData = res.data.data.records
      console.log(res.data.total)
      this.storeOrderPage.total = res.data.data.total
    }).catch((ex)=>{
      console.log(ex)})
    },
    page(index){
      this.storeOrderPage.pages = index
      this.getStoreOrder()
    },
    istype(row, column, cellValue, index){
      if(cellValue == 0){
        return "大平台"
      }else if(cellValue == 1){
        return "社区"
      }
    },
    refund(row, column, cellValue, index){
      for (let re of this.isRefunds){
        if(re.value == cellValue){
          return re.label
        }
      }
    },
    sj(row, column, cellValue, index){
      if(cellValue==null){
        return cellValue
      }else if(cellValue==0){
        return null
      }
      let i = cellValue * 1000
      let date = new Date(cellValue * 1000)

      /* 年 */
      let year = date.getFullYear();
      /* 月 */
      let month = date.getMonth() + 1;//外国的月份是从0开始的所以要加1
      /* 日 */
      let dd = date.getDate();

      /* 时 */
      let hour = date.getHours();
      /* 分 */
      let miunte = date.getMinutes();
      /* 秒 */
      let second = date.getSeconds();

      return year+"-"+month+"-"+dd+" "+hour+":"+miunte+":"+second
    },
    isStatus(row, column, cellValue, index){
      for (let re of this.statuss){
        if(re.value == cellValue){
          return re.label
        }
      }
    },
    send(row){
      as.post("/storeOrder/orderSend",{order_sn:row.order_sn}).then((res)=>{
        console.log(res)
        this.getStoreOrder()
      })

    },
    ifsend(row){
      if(row.status == 1){
        return true;
      }else {
        return false;
      }
    }
  }
}
</script>

<style scoped>

</style>